<template>
    <el-dialog
        :title="title"
        custom-class="el-dialog-600"
        :visible.sync="visible"
    >
        <el-form
            :model="form"
            :rules="rules"
            :ref="formRef"
            :size="$formSize"
            label-width="90px"
        >
            <el-form-item label="分类名" prop="title">
                <el-col :span="23">
                    <el-input
                        clearable
                        v-model="form.title"
                        auto-complete="off"
                        placeholder="请输入分类名"
                    />
                </el-col>
            </el-form-item>

            <el-form-item label="描述" prop="desc">
                <el-input type="textarea" v-model="form.desc" />
            </el-form-item>

            <el-form-item label="是否推荐" prop="support">
                <el-radio-group v-model="form.support">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button :size="$btnSize" @click="visible = false"
                >取 消</el-button
            >
            <el-button
                type="primary"
                :size="$btnSize"
                :loading="loading"
                @click="onSubmit"
            >
                确 定
            </el-button>
        </div>
    </el-dialog>
</template>

<script>
import { adminClassify as Api } from "api";

export default {
    props: {
        id: {
            type: [Number, String],
        },
    },
    data() {
        return {
            // 状态
            loading: false, // 按钮等待
            visible: false, // 弹窗开关
            title: "", // 标题

            formRef: "formRef", // ref

            form: {
                title: "",
                desc: "",
                support: 0,
            },

            // 验证
            rules: {
                title: [
                    {
                        required: true,
                        message: "请输入分类名",
                        trigger: "change",
                    },
                ],
            },
        };
    },
    methods: {
        /* 初始化 */
        init() {
            this.title = this.id ? "编辑" : "新增";

            if (this.id) this.getById();
        },

        /* 获取详情 */
        async getById() {
            const { code, data } = await this.$axios.get(Api.getById, {
                params: { id: this.id },
            });

            if (code === 200) {
                this.form = {
                    title: data.title,
                    desc: data.desc,
                    support: Number(data.support),
                };
            }
        },

        /* 提交 */
        async onSubmit() {
            this.$refs[this.formRef].validate((valid) => {
                if (valid) {
                    this.loading = true;
                }
            });

            if (this.loading) {
                let url = this.id ? Api.update : Api.add;

                let params = {
                    title: this.form.title,
                    desc: this.form.desc,
                    support: this.form.support,
                };

                if (this.id) params.id = this.id;

                const { code, msg, data } = await this.$axios.post(url, params);

                if (code === 200) {
                    this.$msg.success(msg);
                    this.$parent.getList();

                    this.visible = false;
                } else {
                    this.$msg.error(msg ? msg : data);
                }

                this.loading = false;
            }
        },
    },
    watch: {
        visible(status) {
            if (status) {
                this.init();
            } else {
                this.$refs[this.formRef].resetFields();
            }
        },
    },
};
</script>